<template>
  <div name="BannerMenu">
    <div class="bannermenu con_width">
      <!-- 左边菜单 -->
      <div class="left_menu">
        <ul>
          <li
            :class="[menuid==index?'active_list':'','menu_list']"
            v-for="(item,index) in BannerMenu"
            :key="index"
            @mouseenter="showbtn(index)"
            @mouseleave="hidebtn(index)"
          >
            <div class="label">{{item.MenuTitle}}</div>
            <div class="right_icon">
              <i class="iconfont icon-you"></i>
            </div>
          </li>
        </ul>
      </div>

      <!-- 右边内容 -->
      <div class="right_box">
        <ul
          :class="[menuid==index?'show_con':'','right_content']"
          v-for="(item,index) in BannerMenu"
          :key="index"
          :style="'width:' + rightconwidth + 'px'"
          @mouseenter="showbtn(index)"
          @mouseleave="hidebtn(index)"
        >
          <li v-for="(items,index2) in item.ListCon" :key="index2">
            <router-link class="con_list" to="/comdetail">
              <img class="good_img" :src="items.goodsImg" alt />
              <div class="good_name">{{items.goodsName}}</div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "BannerMenu",
  data() {
    this._getData();
    return {
      rightconwidth: null,
      menuid: null,
      BannerMenu: []
    };
  },
  methods: {
    showbtn: function(index) {
      var len = this.BannerMenu[index]["ListCon"].length;
      var listwidth = 248;
      this.menuid = index;
      if (len <= 6) {
        this.rightconwidth = listwidth;
      } else if (len <= 12) {
        this.rightconwidth = listwidth * 2;
      } else if (len <= 18) {
        this.rightconwidth = listwidth * 3;
      } else {
        this.rightconwidth = listwidth * 4;
      }
    },
    hidebtn: function() {
      this.menuid = null;
    },
    _getData: function() {
      // 读取 .json 文件中的数据
      var _this = this;
      this.$http.get("json/bannermenu.json").then(function(res) {
        _this.BannerMenu = res.data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "./BannerMenu.scss";
</style>